/**
 * @author Created by qiush on 2017-07-12.
 */

import {ipcRenderer} from 'electron';

import * as React from 'react';

import './Config.css';

export interface ConfigState {
  serverAddress: string;
}

class Config extends React.Component<undefined, ConfigState> {

  constructor(props) {
    super(props);

    this.state = {
      serverAddress: 'http://yomnn.xicp.io:8180'
    };

    ipcRenderer.on('config', (event: any, config: ConfigState) => {
      console.info('got config', config);
      this.setState(config);
    });
  }

  render() {
    return (
      <div className="Config">

        <div className="Config-title">服务器地址: </div>
        <div className="Config-content">
          <input type="text" value={this.state.serverAddress} onChange={this.serviceAddressChanged}/>
        </div>

        <div className="Config-actions">
          <button type="button" className="btn btn-primary" onClick={this.saveConfig}>
            <span className="fa fa-save"/>
            <span>保存</span>
          </button>
        </div>

      </div>
    );
  }

  private serviceAddressChanged = (event: React.ChangeEvent<HTMLInputElement>) => {
    this.setState({...this.state, serverAddress: event.target.value});
  }

  private saveConfig = () => {
    ipcRenderer.send('save-config', this.state);
  }
}

export default Config;
